<template>
  <div>
    <Modal
      width="300"
      v-model="del.modal"
      title="确认框"
      @on-ok="handleDelOk">
      <p>确认删除该记录？</p>
    </Modal>

    <Modal
        v-model="info.modal"
        title="报警详情"
        >
        <p>{{info.event.url}}</p>

    </Modal>

    <Breadcrumb>
      <Breadcrumb-item href="/">首页</Breadcrumb-item>
      <Breadcrumb-item>报警列表</Breadcrumb-item>
    </Breadcrumb>
    <List :current="current" :columns="columns" :data="events.events.items"
          :total="events.events.total"
          @on-change="handlePageChange">
      <ListHeader>
        <ListOperations>
        </ListOperations>
        <ListSearch>
          <Form ref="formInline" inline :label-width="60">

            <Form-item label="企业" prop="company">
              <Input type="text" placeholder="企业名称" v-model="search.company" style="width: 160px;"/>
            </Form-item>

            <Form-item label="工位名称" prop="station">
              <Input type="text" placeholder="工位名称" v-model="search.station" style="width: 160px;"/>
            </Form-item>

            <Form-item label="工位号" prop="num">
              <Input type="text" placeholder="工位号" v-model="search.num" style="width: 100px;"/>
            </Form-item>

            <Form-item label="日期" prop="start_time">
              <DatePicker type="date" placeholder="开始日期" v-model="start_time" class="datetime"></DatePicker>
              <span> - </span>
              <DatePicker type="date" placeholder="截止日期" v-model="stop_time" class="datetime"></DatePicker>
            </Form-item>

            <Form-item>
              <Button type="primary" @click="handleSearch">查询</Button>
            </Form-item>
          </Form>
        </ListSearch>
      </ListHeader>
    </List>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import Config from '@/config'
  // import time from '@/utils/helpers/timeLite'
  import List, { ListHeader, ListOperations, ListSearch } from '@/components/List'
  import Event from '@/service/app/event'
  import Util from '@/service/util'

  export default {
    name: 'eventList',
    components: {
      List,
      ListHeader,
      ListOperations,
      ListSearch
    },
    data () {
      let self = this
      return {
        info: {
          modal: false,
          event: {}
        },
        del: {
          modal: false,
          id: 0
        },
        start_time: null,
        stop_time: null,
        search: {
          company: '',
          station: '',
          num: '',
          start_time: null,
          stop_time: null,
          name: ''
        },
        current: 1,
        columns: [
          {
            title: '类型',
            key: 'type',
            width: 80,
            render (h, params) {
              let text = self.getTypeText(params.row.type)
              return h('span', null, text)
            }
          },
          {
            title: '企业',
            key: 'company'
          },
          {
            title: '工位名称',
            key: 'station'
          },
          {
            title: '工位号',
            key: 'num'
          },
          {
            title: '状态',
            key: 'status',
            width: 80,
            render (h, params) {
              let text = self.getStatusText(params.row.status)
              return h('span', null, text)
            }
          },
          {
            title: '容许人数',
            key: 'capacity',
            width: 90
          },
          {
            title: '报警人数',
            key: 'peoples',
            width: 90
          },
          {
            title: '记录时间',
            key: 'created',
            width: 160,
            render (h, params) {
              let text = self.getTimeText(params.row.created)
              return h('span', null, text)
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 120,
            render: (h, params) => {
              let btnView = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: () => {
                    // this.handleView(params.row)
                    this.handleEdit(params.row)
                  }
                }
              }, '详情')
              return h('div', [btnView])
            }
          }
        ]
      }
    },
    computed: {
      ...mapState(['events'])
    },
    created () {
      this.get()
    },
    methods: {
      get (current = 1) {
        this.$set(this, 'current', current)

        this.search.start_time = this.getSeconds(this.start_time)
        this.search.stop_time = this.getSeconds(this.stop_time)

        this.$store.dispatch('getEvents', {
          offset: (current - 1) * Config.PAGE_SIZE,
          limit: Config.PAGE_SIZE,
          ...this.search
        })
      },
      handlePageChange (current) {
        this.get(current)
      },
      handleSearch () {
        this.get()
        this.$set(this, 'current', 1)
      },
      getSeconds (t) {
        if (!t) {
          return t
        }
        return t.getTime() / 1000
      },
      getTypeText (type) {
        return Event.getTypeText(type)
      },
      getStatusText (status) {
        return status > 0 ? '成功' : '失败'
      },
      getTimeText (seconds) {
        return Util.getTimeText(seconds)
      },
      handleView (event) {
        this.info.event = event
        this.info.url = `${event.httpPrefix}/${event.name}.m3u8`
        this.info.modal = true
      },
      handleEdit (event) {
        this.$router.push(`/events/form/${event.id}`)
      },
      handleDel (event) {
        this.del.modal = true
        this.del.id = event.id
      },
      handleDelOk () {
        this.$store.dispatch('deleteEvent', {id: this.del.id}).then(() => {
          this.$Message.success('删除成功！')
          this.get()
        })
      }
    }
  }
</script>

<style scoped>

.datetime {
  width: 120px;
}

</style>
